<template>
	<view class="container">
		<view class="page">
			<view class="flex searchBox">
				<image src="../../static/index/Search.png" class="Search"></image>
				<input type="text" placeholder="请输入搜索内容" v-model="mixSearch" @blur="search" />
			</view>
		</view>
		<view class="flex list">
			<view class="listBox" v-for="(item,index) in menuList" :key="index" @click="skipPage(item)">
				<image :src="item.cover" class="listImg"></image>
				<view>{{item.name}}</view>
			</view>
		</view>
		<view>
			<view class="flex site">
				<view class="flex center">
					<view class="border"></view>
					<view class="recommend">推荐</view>
				</view>
				<view class="flex center mapBox">
					<image src="../../static/index/map.png" class="map"></image>
					<!-- <sh-address v-model:codeValue="valCode" v-model="val" @change="(e)=>change(e)">
						{{
					    location? `${location}`: "点此选择区域"
					  }}
					</sh-address> -->
					<view @click="getLocation">{{location? `${location}`: "点此定位"}}</view>
				</view>
			</view>
			<view class="flex screen">
				<picker @change="rankTypeChange" :value="rankTypeIndex" :range="rankTypeArray">
					<view class="flex center">
						<!-- <view>{{rankTypeArray[rankTypeIndex]}}</view>
						<image src="../../static/index/bottomArrows.png" class="bottomArrows"></image> -->
					</view>
				</picker>
				<view class="flex filtrateBox">
					<!-- <view class="flex center filtrate">
						<view>距离</view>
						<image src="../../static/index/bottomArrows.png" class="bottomArrows"></image>
					</view> -->
					<!-- <picker @change="sortTypeChange" :value="sortTypeIndex" :range="sortTypeArray">
						<view class="flex center">
							<view>{{sortTypeArray[sortTypeIndex]}}</view>
							<image src="../../static/index/bottomArrows.png" class="bottomArrows"></image>
						</view>
					</picker> -->
					<view class="flex center" @click="alertClick">
						<view>筛选</view>
						<image src="../../static/index/bottomArrows.png" class="bottomArrows"></image>
					</view>
					<!-- <view class="flex center filtrate">
						<view>全部筛选</view>
						<image src="../../static/index/bottomArrows.png" class="bottomArrows"></image>
					</view> -->
				</view>
			</view>
		</view>
		<scroll-view class="itemBox" scroll-y="true" @scrolltolower="reachBottom">
			<view class="flex item" @click="skip(item)" v-for="(item,index) in list" :key="index">
				<image :src="buildImgUrl(item.icon)" class="foodImg"></image>
				<view style="flex: 1;">
					<view class="itemTitle">{{item.name}}</view>
					<view class="flex organization">
						<!-- 	<image
							:src="item.platformType==2?'../../static/index/mtLogo.png':'../../static/index/blueOrdering.png'"
							class="mtLogo"></image> -->
						<image v-if="item.platformType==2 || item.platformType==5" src="../../static/index/mtLogo.png"
							mode="" class="mtLogo"></image>
						<image v-if="item.platformType==1" src="../../static/index/blueOrdering.png" mode=""
							class="mtLogo"></image>
						<image v-if="item.platformType==3 || item.platformType==9" src="../../static/index/392.png"
							mode="" class="mtLogo"></image>
						<image v-if="item.platformType==4" src="../../static/index/391.png" mode="" class="mtLogo">
						</image>
						<image v-if="item.platformType==6" src="../../static/index/393.png" mode="" class="mtLogo">
						</image>
						<image v-if="item.platformType==7" src="../../static/index/394.png" mode="" class="mtLogo">
						</image>
						<image v-if="item.platformType==8" src="../../static/index/395.png" mode="" class="mtLogo">
						</image>
						<view>{{item.platformType_dictText}}</view>
					</view>
					<view class="flex subsidy">
						<view>
							<view class="" style="display: flex;justify-content: space-between;width: 480rpx;">
								<view class="flex" style="">
									<view class="yellowBox" style="margin-left: 14rpx;"
										v-for="(tag,index) in item.tagsList" :key="index">
										{{tag}}
									</view>
								</view>
								<view class="flex center">
									<image src="../../static/index/map.png" class="map"></image>
									<view>{{item.distance}}</view>
								</view>
							</view>
							<view class="flex preemptBox">
								<view>
									<view class="flex">
										<view class="preemptBoxbutton">
											<text
												v-if="isVip">{{'会员满'+item.shouldAmount+'返'+item.vipReturnAmount}}</text>
											<text v-else>{{'满'+item.shouldAmount+'返'+item.returnAmount}}</text>
											<!--{{isVip?'会员返'+item.vipReturnAmount:'满'+item.shouldAmount+'返'+item.returnAmount}}-->
										</view>
										<view class="redBox" style="margin-left: 14rpx;">
											{{item.isAppraise=='Y'?'需要评价':'无需评价'}}
										</view>
									</view>
									<!-- '会员返'+ isVip?item.vipReturnAmount:-->
									<!-- <view class="redBox" style="margin-top: 6rpx;" >
										需要评价
									</view> -->
									<view style="width: 95%;">抢单时间：{{item.shopStartTime}}-{{item.shopEndTime}}</view>
									<view class="flex center">
										<view class="schedule">
											<view class="scheduleIng" :style="{width:widthNum(item)+'%'}">
											</view>
										</view>
										<view>剩余<text class="num">{{item.remainCount||0}}</text>份</view>
									</view>
								</view>
								<view class="preempt" @click.stop="skip(item)">去抢单</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<alert :popupMask="popupMask" :screen="screen" ref="alert" @close="close" @sub="sub"></alert>
	</view>
</template>
<script>
	let that;
	import {
		indexList,
		shouyeData,
		indexKateList
	} from '../../common/api.js'
	import {
		buildImgUrl
	} from '../../utils/me.js'
	import alert from '@/components/alert.vue'
	var QQMapWx = require('@/utils/qqmap-wx-jssdk.min.js')
	var qqMapSdk = new QQMapWx({
		key: 'IF6BZ-42FKQ-WJM5V-2PASU-72ZY7-MMFNA'
	})
	export default {
		components: {
			alert
		},
		data() {
			return {
				buildImgUrl,
				menuList: [],
				pageNo: 1,
				rankTypeArray: ['综合排序', '正序', '倒序'],
				rankTypeObj: ['DEF', 'AES', 'DESC'],
				rankTypeIndex: 0,
				sortTypeArray: ['品类', '平台', '销量', '店铺'],
				sortTypeObj: ['DEF', 'PLATFORM', 'SALES', 'MIX', ],
				sortTypeIndex: 0,
				list: [],
				valCode: '',
				val: [],
				location: '',
				mixSearch: '',
				isVip: false,
				popupMask: false,
				screen: false,
				obj: {},
				shopKate: '',
				isAppraise: null,
				latitude: '',
				longitude: '',
				total: 0
			}
		},
		onLoad() {
			this.getLocation()
		},
		onShow() {
			this.pageNo = 1
			this.indexKateList()
			// this.getSite()
			this.shouyeData()
			console.log(this.location)
			this.isVip = uni.getStorageSync('isVip')
		},
		methods: {
			getLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						this.latitude = res.latitude
						this.longitude = res.longitude
						console.log('0000', res)
						this.reverseGeocode(res.latitude, res.longitude);
					},
					fail: (err) => {
						uni.chooseLocation({
							success: (res) => {
								console.log(res)
								this.location = res.name
								this.latitude = res.latitude
								this.longitude = res.longitude
								this.pageNo = 1
								this.indexList()
							}
						});
					}
				});
			},
			// 逆地理编码函数
			reverseGeocode(latitude, longitude) {
				// const key = '661d3502fb201342ba95a1767dce48ed'; // 换成你自己的AppKey
				// const url = `https://restapi.amap.com/v3/geocode/regeo?key=${key}&location=${longitude},${latitude}`;
				// uni.request({
				// 	url: url,
				// 	method: 'GET',
				// 	success: (res) => {
				// 		if (res.statusCode === 200 && res.data.status === '1') {
				// 			// res.data.regeocode.addressComponent.province + res.data.regeocode.addressComponent.city +
				// 			this.location = res.data.regeocode.addressComponent.streetNumber.street + res.data
				// 				.regeocode.addressComponent.streetNumber.number,
				// 				this.pageNo = 1
				// 			this.indexList()
				// 		} else {
				// 			console.error('逆地理编码失败:', res.data);
				// 		}
				// 	},
				// 	fail: (error) => {
				// 		console.error('请求失败:', error);
				// 	}
				// });
				// 腾讯地址解析
				qqMapSdk.reverseGeocoder(({
					location: {
						latitude: latitude,
						longitude: longitude,
					},
					success: (res) => {
						console.log('QQMapWx11', res)
						this.location = res.result.address_component.street
						this.pageNo = 1
						this.indexList()
					},
					fail: (error) => {
						console.log(error)
					}
				}))
			},
			alertClick() {
				this.$refs.alert.loadDiceByCode()
				this.popupMask = true
				this.screen = true
			},
			close() {
				this.popupMask = false
				this.screen = false
			},
			skipPage(item) {
				if (item.type == 1) {
					uni.navigateToMiniProgram({
						appId: item.appId,
						path: item.url,
						envVersion: "release",
						success: res => {
							// 打开成功
							console.log("打开成功", res);
						},
						fail: err => {
							console.log(err);
						}
					})
				} else {
					uni.setStorageSync('innerCover', item.innerCover)
					uni.navigateTo({
						url: item.url
					})
				}
			},
			indexKateList() {
				indexKateList().then(res => {
					this.menuList = res.result.slice(0, 8)
				})
			},
			search() {
				this.pageNo = 1
				this.list = []
				this.indexList()
			},
			reachBottom() {
				if (this.total <= this.list.length) {
					uni.showToast({
						title: '已加载全部数据',
						icon: "none"
					});
				} else {
					this.pageNo++
					this.indexList()
				}
			},
			change(e) {
				this.valCode = e.code
				this.location = e.city
				this.pageNo = 1
				this.list = []
				this.indexList()
			},
			getSite() {
				uni.getLocation({
					type: "gcj02",
					isHighAccuracy: true,
					success(res) {
						location.longitude = res.longitude;
						location.latitude = res.latitude;
					},
					fail(err) {
						console.log(err)
					},
				});
			},
			widthNum(item) {
				let num = ((Number(item.count) - Number(item.remainCount)) / Number(item.count)) * 100
				return num >= 100 ? 100 : num
			},
			sortTypeChange(e) {
				this.sortTypeIndex = e.detail.value
				this.pageNo = 1
				this.list = []
				this.indexList()
			},
			rankTypeChange(e) {
				this.rankTypeIndex = e.detail.value
				this.pageNo = 1
				this.list = []
				this.indexList()
			},
			// 获取首页列表
			indexList() {
				let data = {
					pageNo: this.pageNo,
					pageSize: 10,
					adCode: this.valCode,
					mixSearch: this.mixSearch,
					evaluate: this.obj.evaluate || '',
					sortType: this.obj.sortType || 'DEF',
					shopKate: this.shopKate,
					rankType: 'DESC',
					latitude: this.latitude,
					longitude: this.longitude,
				}
				let demoList = []
				indexList(data).then(res => {
					demoList = res.result.records
					demoList.forEach((item) => {
						item.tagsList = item.tags.split(',')
						item.distance = Math.round(item.distance / 1000)
						console.log(item.distance);
						if (item.distance < 1) {
							item.distance = '0.1km内'
						} else {
							item.distance = item.distance + 'km'
						}
					})
					this.list = this.pageNo == 1 ? demoList : this.list.concat(demoList)
					this.total = res.result.total
				})
			},
			sub(e) {
				this.obj = e
				this.shopKate = this.obj.shopKate.map(V => V.value).join(',')
				this.pageNo = 1
				this.list = []
				this.indexList()
				this.popupMask = false
				this.screen = false
			},
			shouyeData() {
				shouyeData().then(res => {
					console.log(res);
				})
			},
			skip(item) {
				uni.navigateTo({
					url: './detail?id=' + item.id
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.num {
		color: #FD4545;
		font-size: 24rpx;
		font-weight: 700;
	}

	.scheduleIng {
		position: absolute;
		width: 30%;
		height: 18rpx;
		background: #FDCC45;
		border-radius: 12rpx;
	}

	.schedule {
		position: relative;
		width: 174rpx;
		height: 18rpx;
		background: rgba(253, 204, 69, 0.3);
		margin-right: 6rpx;
		border-radius: 12rpx;
		margin-top: 4rpx;
	}

	.preemptBox {
		justify-content: space-between;
		align-items: flex-end;
		margin-top: 6rpx;
	}

	.preemptBoxbutton {
		width: 170rpx;
		background: #FDCC45;
		padding: 4rpx 10rpx 6rpx;
		font-size: 24rpx;
		text-align: center;
		font-weight: 500;
		color: #FFFFFF;
		border-radius: 12rpx;
	}

	.preempt {
		width: 160rpx;
		height: 46rpx;
		font-family: Source Han Sans CN;
		font-size: 28rpx;
		font-weight: bold;
		line-height: normal;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #FFFFFF;
		line-height: 46rpx;
		background: #FD4545;
		border-radius: 12rpx;
		text-align: center;
	}

	.subsidy {
		justify-content: space-between;
	}

	.yellowBox {
		background: #FDCC45;
		padding: 4rpx 10rpx 6rpx;
		font-family: Source Han Sans CN;
		font-size: 24rpx;
		font-weight: 500;
		line-height: normal;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #FFFFFF;
		border-radius: 12rpx;
	}

	.redBox {
		background: red;
		width: 80px;
		text-align: center;
		padding: 4rpx 10rpx 6rpx;
		font-family: Source Han Sans CN;
		font-size: 24rpx;
		font-weight: 500;
		line-height: normal;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #FFFFFF;
		border-radius: 12rpx;
	}

	.organization {
		font-family: Source Han Sans CN;
		font-size: 24rpx;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #000000;
		margin: 8rpx 0 16rpx;
	}

	.itemTitle {
		font-family: Source Han Sans CN;
		font-size: 32rpx;
		font-weight: bold;
		line-height: normal;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #000000;
	}

	.mtLogo {
		width: 42rpx;
		height: 42rpx;
		margin-right: 14rpx;
	}

	.foodImg {
		width: 186rpx;
		height: 186rpx;
		flex-shrink: 0;
		margin-right: 24rpx;
	}

	.item {
		width: 688rpx;
		height: auto;
		margin-top: 20rpx;
		padding: 14rpx 18rpx 16rpx 16rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		font-family: Source Han Sans CN;
		font-size: 24rpx;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #999999;
	}

	.mapBox {
		font-family: Source Han Sans CN;
		font-size: 24rpx;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #9E9E9E;
	}

	.filtrateBox {
		margin-top: 10rpx;
	}

	.filtrate {
		margin-left: 34rpx;
	}

	.map {
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}

	.site {
		justify-content: space-between;
		margin-top: -58rpx;
		align-items: center;
		padding: 0 22rpx;
	}

	.recommend {
		font-family: Source Han Sans CN;
		font-size: 36rpx;
		font-weight: bold;
		line-height: normal;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #FDCC45;
	}

	.screen {
		justify-content: space-between;
		font-family: Source Han Sans CN;
		font-size: 24rpx;
		font-weight: 500;
		line-height: normal;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #333333;
		margin-top: 10rpx;
		padding: 0 22rpx;
		align-items: center;
	}

	.bottomArrows {
		width: 18rpx;
		height: 10rpx;
		margin-left: 8rpx;
		margin-top: 6rpx;
	}

	.border {
		width: 6rpx;
		height: 32rpx;
		background: #FDCC45;
		margin-right: 8rpx;
	}

	.listBox {
		font-family: Source Han Sans CN;
		font-size: 24rpx;
		font-weight: 500;
		line-height: normal;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #333333;
		margin: 0 30rpx;
	}

	.listImg {
		width: 108rpx;
		height: 108rpx;
	}

	.list {
		justify-content: space-between;
		align-items: center;
		position: relative;
		left: 14rpx;
		top: -80rpx;
		width: 722rpx;
		height: 374rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		flex-wrap: wrap;
	}

	input {
		font-family: Source Han Sans CN;
		font-size: 24rpx;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: rgba(51, 51, 51, 0.302);
		text-align: center;
	}

	.Search {
		width: 36rpx;
		height: 36rpx;
	}

	.searchBox {
		width: 416rpx;
		height: 28rpx;
		display: flex;
		background: #FFFFFF;
		border-radius: 30rpx;
		align-items: center;
		padding: 10rpx 24rpx;
	}

	.page {
		background: linear-gradient(180deg, #FDCC45 0%, rgba(253, 204, 69, 0) 104%);
		width: 100%;
		height: 155rpx;
		padding-top: 55px;
		padding-left: 18rpx;
	}

	.container {
		width: 100vw;
		height: 100vh;
		overflow-y: hidden;
		overflow-x: hidden;
		display: flex;
		flex-direction: column;
		background: #F7F7F7;

		.itemBox {
			padding: 10rpx 14rpx 0rpx;
			flex: 1;
			overflow: scroll;
		}
	}

	page {
		background: #F7F7F7;
		padding-top: var(--status-bar-height);
	}
</style>